<template>
	<view class="qq">

		<view class="logo">

		</view>

		<view class="list">

			<view class="topLine">
				<image  class="logo1"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/Group_2267.png" mode=""></image>
					<view class="words">
						{{maskType == 1?'超清无水印原图下载':'看广告免费获取结果'}}
					</view>
			</view>
			
			<view class="item">
				<view class="left">
					<view class="top">
						{{maskType == 1?'超清无水印原图下载':'看广告免费获取结果'}}
					</view>
					<view class="bot">
						今日还可看{{usableDownload}}次
					</view>
				</view>
				<view class="right" @click="clickDownload">
					{{maskType == 1?'看广告下载':'免费获取'}}
					<!-- <image class="more" src="https://tb.wuyouzhuan888.com/applet-icon/h3.png" mode="">
					</image> -->
				</view>
			</view>
			<view class="item" v-if="!isIPhone">
				<view class="left">
					<view class="top">
						{{maskType == 1?'免广告下载超清原图':'免广告获取结果'}}
					</view>
					<view class="bot">
						每天上新大量精选内容
					</view>
				</view>
				<view class="right dif" @click="clickVip">
					立即开通
					<!-- <image class="more" src="https://tb.wuyouzhuan888.com/applet-icon/h3.png" mode="">
					</image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 可下载次数
			usableDownload: 0,
			// 苹果手机
			isIPhone: false,
			// 弹窗类型 1下载 2测评
			maskType: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {}
		},
		methods: {
			sure() {
				this.$emit('closeDk')
			},
			// 点击下载
			clickDownload() {
				// 点击广告
				this.$emit('clickWatchAd')
			},
			// 点击会员
			clickVip() {
				// 点击会员
				this.$emit('clickVip')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topLine{
		display: flex;
		.words{
			padding: 45rpx 0 0 11rpx;
			font-size: 38rpx;
			font-family: Tomorrow, Tomorrow;
			font-weight: 400;
			color: #B6FF6D;
			line-height: 45rpx;
		}
		
	}
	.qq {
		position: relative;

		// margin-top: 261rpx;

		width: 638rpx;

		// padding-bottom: 24rpx;
		// background: linear-gradient(180deg, #373C5F 0%, #242234 100%);
		.list {
			padding-bottom: 24rpx;
			background: #282B4B;
			border-radius: 20rpx;

			// padding-top: 244rpx;
			.item {
				margin: 0 24rpx 32rpx;

				&:last-child {
					margin-bottom: 0;
				}

				padding: 32rpx 0 29rpx 34rpx;
				background: #3A3D68;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					.top {
						font-size: 30rpx;
						font-family: PingFang HK-Light, PingFang HK;
						font-weight: 300;
						color: #FFFFFF;
					}

					.bot {
						margin-top: 6rpx;
						ont-size: 23rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #8CC950;
						line-height: 27rpx
					}
				}

				.right {
					margin-right: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33rpx;
					width: 185rpx;
					height: 72rpx;
					background: #16AC51;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					opacity: 1;
					&.dif {
						background: #915EFF;
					}

					.more {
						width: 11rpx;
						height: 19rpx;
						margin-left: 13rpx;
					}
				}

			}
		}


		.logo {
			// position: absolute;
			width: 372rpx;
			height: 100rpx;
			// top: -128rpx;
			// left: 50%;

		}

		.logo1 {
			margin: -74rpx 0 0 25rpx;
			// position: absolute;
			width: 217rpx;
			height: 219rpx;
			// top: -132rpx;
			// left: 50%;
			// margin-left: -128rpx;
		}

	}
</style>